<template>
    <div class="upload-excel">
        <div class="btn-upload">
            <el-button :loading="loading" type="primary" @click="handleUpload">
                {{$t('msg.uploadExcel.upload')}}
            </el-button>
        </div>
        <input @change="handleChange" ref="excelUploadInput" class="excel-upload-input" accept=".xlsx,.xls" type="file">
        <div class="drop" @drop.stop.prevent="handleDrop" @dragover.stop.prevent="handleDragover" @dragenter.stop.prevent="handleDragover">
            <i class="el-icon-upload"></i>
            <span>将文件拖到此处</span>
        </div>
    </div>
</template>

<script>
import XLSX from "xlsx"
import {getHeaderRow,isExcel} from "./utils"
export default {
    name: '',
    props:{
        beforeUpload:Function,
        onSuccess:Function
    },
    data() {
        return {
            loading:false
        };
    },

    mounted() {
        
    },

    methods: {
        handleDrop(e){
            let files = e.dataTransfer.files
            if(files.length !== 1){
                this.$message.error("必须要有一个文件")
            }
            let rawFile = files[0];
            if(!isExcel(rawFile)){
                this.$message.error("文件必须是 .xlsx, .xls, .csv 格式")
            }
            this.upload(rawFile)
        },
        handleDragover(e){
            e.dataTransfer.dropEffect='copy'
        },
        handleUpload(){
            this.loading = true;
            this.$refs["excelUploadInput"].click()
        },
        handleChange(e){
            let files = e.target.files[0];
            if(!files) return;
            this.upload(files)
        },
        upload(files){
            if(!this.beforeUpload){
                this.readerData(files)
                return
            }
            let brefore = this.beforeUpload(files);
            if(before){
                this.readerData(files)
                return
            }
        },
        readerData(rawFile){
            this.loading = true;
            return new Promise((resolve,reject)=>{
                let reader = new FileReader();
                reader.onload = (e)=>{
                    let data= e.target.result;
                    let workbook = XLSX.read(data,{type:"array"})
                    let firstSheetName = workbook.SheetNames[0];
                    let worksheet = workbook.Sheets[firstSheetName]
                    let header = getHeaderRow(worksheet)
                    let results = XLSX.utils.sheet_to_json(worksheet)
                    this.generateData({header,results})
                    this.loading = false;
                    resolve()
                }
                reader.readAsArrayBuffer(rawFile)
            })
        },
        generateData(excelData){
            this.onSuccess && this.onSuccess(excelData)
        }
    },
};
</script>

<style lang="scss" scoped>
.upload-excel{
    display: flex;
    justify-content:center;
    margin-top:100px;
    .btn-upload,.drop{
        border:1px dashed #bbb;
        width: 350px;
        height: 160px;
        text-align:center;
        line-height: 160px;
    }
    .excel-upload-input{
        display: none;
    }
    .drop{
        display: flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        line-height:60px;
        color: #bbb;
        i{
            font-size:60px;
            display: block
        }
    }
}
</style>